<template>
  <!-- <div class="cockpit" :style="{backgroundImage: `url(${require('@/assets/Image/cockpit-bg.png')})`}"> -->
  <div>
    <div class="dark-list">
      <div class="dark-list-scroll">
        <div class="each-dark" @click="getDesDetail(item)" v-for="item in list" :key="item.id">
          <div class="dark-list--title">
            <h1>{{ item.title }}</h1>
            <p>
              <span>来源：{{ item.source || '未知' }}</span>
              <span>{{ item.createTime }}</span>
            </p>
          </div>
          <p class="ellipsis-2">
            详细内容：<span v-html="item.content || item.describe"></span>
          </p>
        </div>
      </div>
    </div>
    <p class="dark-back" @click="goback">返 回</p>
  </div>
</template>
<script>
import moment from 'moment';
import { czsj } from '@/api/serve';

export default {
  components: { },
  inject: ['updateTitle', 'getNumberdetails', 'goback', 'getDesDetail'],
  data() {
    return {
      moment,
      show: false,
      reload: false,
      active: 0,
      list: [],
      id: '',
      queryParams: {
        pageSize: 10,
        pageNo: 1
      },
      total: 0,
      loading: false,
      finished: false
    };
  },
  beforeDestroy() {

  },
  created() {
    this.id = this.$route.query.id;
    this.getList();
    this.updateTitle('事件摘要');
  },
  computed: {

  },
  mounted() {
    this.$nextTick(() => {
       if (document.querySelector('.dark-list-scroll')) {
          const selectWrap = document.querySelector('.dark-list-scroll');
          selectWrap.addEventListener('scroll', this.scrollLoadMore);
       }
    });
  },
  methods: {
    getList() {
      this.loading = true;
      czsj(this.queryParams).then(res => {
        this.list = this.list.concat(res.data.records || []);
        this.total = res.data.total;
        this.loading = false;
        if (this.list.length >= this.total) {
          this.finished = true;
        }
        // this.listPage.total = res.data.total;
      });
    },
    scrollLoadMore() {
      if (this.loading || this.finished) return;
      const scrollWrap = document.querySelector('.dark-list-scroll');
      var currentScrollTop = scrollWrap.scrollTop;
      var currentOffsetHeight = scrollWrap.scrollHeight;
      var currentClientHeight = scrollWrap.clientHeight;
      if ((currentScrollTop + currentClientHeight >= currentOffsetHeight - 80)) {
          // 到底部了 重新请求数据
          this.queryParams.pageNo++; // 页码++
          this.getList();
       }
    }
  }
};
</script>
<style lang="less" scoped>
  .cockpit {
    background-size: 100% 100%;
    background-position: top center;
    height: 1080px;
    position: relative;
    overflow: hidden;
    background-color: rgb(4,11,36);

    .hot-each {
      display: flex;
      align-items: center;
      margin-bottom: 6px;
      position: relative;
      &:nth-child(5) {
        margin-top: 8px;
      }

      // &::before {
      //   content: ' ';
      //   position: absolute;
      //   width: 14px;
      //   height: 14px;
      //   border: 1px solid #5CA1F2;
      //   border-radius: 100%;
      //   left: 30px;
      // }
      // &::after {
      //   content: ' ';
      //   position: absolute;
      //   width: 1px;
      //   height: 43px;
      //   background: #395a81;
      //   left: 37px;
      //   top: 29px;
      // }
      // &:last-child {
      //   &::after {
      //     display: none;
      //   }
      // }

      .h-list--order-text {
        color: #fff;
        font-size: 15px;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        background: #36414F;
        line-height: 20px;
        text-align: center;
        // font-weight: bold;
      }
      .h-list--order-1 {
        .h-list--order-text {
          background: #E19F29;
        }

      }
      .h-list--order-2 {
        .h-list--order-text {
          background: #85939F;
        }
      }
      .h-list--order-3 {
        .h-list--order-text {
          background: #B46949;
        }
      }
      .h-list--order-4 {
        .h-list--order-text {
          background: #36414F;
        }
      }
      .title {
        // height: 23px;
      }
      .h-list--order {
        height: 20px;
      }

      .hot-each--content {
        margin-left: 38px;
        width: 84%;
        h1 {
          width: 100%;
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 24px;
          margin: 0;
          cursor: pointer;
          transition: all 0.3s;
          &:hover {
            color: #48AAFB;
          }
        }
        p {
          font-size: 12px;
          font-weight: 400;
          color: #CBCBCB;
          line-height: 24px;
          margin: 0;
        }
      }
    }

  }

</style>
<style lang="less">
  .dark-list {
    background: url('~@/assets/Image/dark-list.png');
    background-size: 100% 100%;
    width: 1570px;
    height: 700px;
    margin: 0 auto;
    padding: 60px 128px;
    padding-right: 20px;
    box-sizing: border-box;

    .dark-list-scroll {
      height: 580px;
      overflow-y: auto;
      padding-right: 120px;
      &::-webkit-scrollbar {
        width: 13px;
        // height: 224px;
      }
      &::-webkit-scrollbar-thumb {
        background: #154DA2;
        border-radius: 7px;
      }
      &::-webkit-scrollbar-track {
        border-radius: 7px;
        background: transparent;
      }
    }
    .dark-list--title {
      color: #27CEF8;
      font-weight: 400;
      // font-style: italic;
      line-height: 1.5;
      display: flex;
      justify-content: space-between;
      h1 {
        font-size: 20px;
        color: #27CEF8;
        max-width: 70%;
        margin: 0;
      }
      p {
        font-size: 16px;
        >span:first-child {
          margin-right: 36px;
        }
      }
    }
    .each-dark {
      margin-bottom: 20px;
      transition: all 0.3s;
      box-sizing: border-box;
      padding: 20px 30px;
      border: 2px solid transparent;
      cursor: pointer;
      >p {
        font-size: 15px;
        // font-family: Source Han Sans CN;
        font-weight: 400;
        // font-style: italic;
        color: #FFFFFF;
        line-height: 1.5;
        margin: 0;
      }
      &:hover {
        background: #20314B;
        border: 2px solid #83AFE7;
      }
    }
  }

</style>
